<template>
  <div>
    <el-drawer
      v-model="drawer"
      :title="title"
      :size="size"
      :close-on-click-modal="false"
    >
      <div class="box">
        <div class="body">
          <slot />
        </div>
        <div class="but">
          <!-- <el-button type="primary" round>确认</el-button>
            <el-button type="primary" round @click="close()">取消</el-button> -->
        </div>
      </div>
    </el-drawer>
  </div>
</template>

<script setup>
import { ref } from "vue";

const drawer = ref(false);

defineProps({
  title: {
    type: String,
    defauit: "",
  },

  size: {
    default: "50%",
  },
});

const open = () => {
  drawer.value = true;
};
const close = () => {
  drawer.value = false;
};
const change = () => {
  drawer.value = true;
};

const alter = () => {
  drawer.value = true;
};

const addls = () => {
  drawer.value = true;
};

defineExpose({
  open,
  close,
  change,
  alter,
  addls,
});
</script>

<style scoped>
.box {
  height: 100%;
  width: 100%;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
}
.body {
  width: 100%;
  height: 90%;
  overflow-y: scroll;
}
</style>
